<template>
  <div class="sidebar">
    <!-- 侧边栏导航内容 -->
    <ul class="side-nav">
      <!-- 顶部图片 -->
      <li class="side-top">
        <div>
          <img src="../assets/img/1.png" alt="head">
        </div>
      </li>
      <!-- 各小块内容 -->
      <li class="side-item" :class="{ itemFocus: itemOrder == 1 }" @click="onItem(1)">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 2 }" @click="onItem(2)">
        <i class="el-icon-s-custom"></i>
        <span>权限管理</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 3 }" @click="onItem(3)">
        <i class="el-icon-s-custom"></i>
        <span>系统管理</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 4 }" @click="onItem(4)">
        <i class="el-icon-s-custom"></i>
        <span>系统监控</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 5 }" @click="onItem(5)">
        <i class="el-icon-s-custom"></i>
        <span>协同管理</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 6 }" @click="onItem(6)">
        <i class="el-icon-s-custom"></i>
        <span>微信管理</span>
      </li>
      <li class="side-item" :class="{ itemFocus: itemOrder == 7 }" @click="onItem(7)">
        <i class="el-icon-s-custom"></i>
        <span>支付管理</span>
      </li>
      <li class="exit">退出</li>
    </ul>
    <!-- 次级导航侧边栏 -->
    <ul class="subnav" :class="{ openSubnav: opened }">
      <li class="subnav-item subnav-top">{{title}}</li>
      <li class="subnav-item" v-for="item of data" :key="item.id">
        <i class="el-icon-s-tools"></i>
        <span>{{item}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Sidebar',
  data () {
    return {
      // 样式切换
      itemOrder: 1,
      // 次级导航栏弹出
      opened: false,
      // 初试化次级导航栏条目
      title: '',
      data: []
    }
  },
  methods: {
    // 侧边栏各区块点击事件
    onItem (order) {
      // 次级导航栏出现并进行条目的初始化
      if (order === 1) {
        this.opened = false
      } else if (order === this.itemOrder) {
        this.opened = !this.opened
      } else {
        this.opened = true
        this.setSubnav(order)
      }
      // 样式切换
      this.itemOrder = order
    },
    // 设置次级导航栏个条目内容
    setSubnav (num) {
      var that = this
      var index = num - 2
      axios.get('/static/mock/subnav.json').then(function (response) {
        if (response.status === 200) {
          var titleList = response.data.title
          var data = response.data.data
          that.title = titleList[index].title
          that.data = data[index]
        } else {
          console.log(response.status)
        }
      }).catch(function (error) { console.log(typeof +error) })
    }
  }
}
</script>

<style lang="less" scoped>
  .sidebar {
    display: flex;
    flex-direction: row;
    height: 100%;
    // 侧边栏主体
    .side-nav {
      width: 110px;
      position: relative;
      height: 100%;
      background-color: #444;
      // 顶部图片
      .side-top {
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        padding: 20px 0;
        div {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70px;
          height: 70px;
          background-color: #fff;
          border-radius: 50%;
          margin: 0 auto;
          img {
            width: 65px;
          }
        }
      }
      .side-item {
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-left: 4px solid #1d2a33;
        cursor: pointer;
        i {
          font-size: 22px;
          color: #8c8a98;
          margin-right: 8px;
        }
        span {
          font-size: 14px;
          color: #8c8a98;
        }
      }
      // 退出
      .exit {
        position: absolute;
        bottom: 0;
        cursor: pointer;
        align-self: flex-end;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        background-color: aliceblue;
      }
      .exit:hover {
        color: #fff;
        background-color: #a7a7a7;
      }
      .side-item:hover {
        background-color: #f8f8f8;
        span {
          color: #333;
        }
      }
      // 样式切换
      .itemFocus {
        background-color: #f8f8f8;
        border-left: 4px solid #f03a51;
        span {
          color: #333;
        }
      }
    }
    // 次级导航栏隐藏弹出  通过点击事件增加宽度
    .subnav {
      display: inline-block;
      width: 0;
      height: 100%;
      background-color: #f5f3f3;
      border-right: 1px solid #b4b1b1;
      overflow: hidden;
      transition: all .5s;
      -webkit-transition: all .5s;
      .subnav-item {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 70px;
        padding: 0 22px;
        font-size: 16px;
        color: #878787;
        overflow: hidden;
        cursor: pointer;
        i {
          font-size: 22px;
          margin-right: 10px;
        }
      }
      .subnav-item:hover {
        background-color: #d8d6d6;
      }
      // 次级导航栏头部不需要hover变色
      .subnav-top {
        border-bottom: 1px solid #b4b1b1;
        cursor: default;
      }
      .subnav-top:hover {
        background-color: #f5f3f3;
      }
    }
    // 为次级导航栏添加宽度类
    .openSubnav {
      width: 150px;
    }
  }
</style>
